<template>
  <div class="map-info" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-text="地图加载中"
    element-loading-spinner="el-icon-loading">
    <div class="map-info-header">
      <!-- 数据统计 -->
      <div class="cards">
        <!-- 省市选择 -->
        <div class="city-select">
          <a href="javascript:;" @click="select" class="city-select-item">惠州市</a>
        </div>
        <div class="item" v-for="(item, index) in list" :key="index">
          <div v-for="item in 4" :key="item" :class="['light', `light${item}`]"></div>
          <div class="main">
            <div class="desc">{{ item.title }}</div>
            <div class="number">{{ formatNumberWithCommas(item.value) }}<span class="unit">{{ item.unit }}</span></div>
          </div>
          <div class="rate">
            同比：<span class="value" :class="{ 'up-value': item.rateType > 0 }"><div :class="{ 'triangle-up': item.rateType > 0, 'triangle-down': item.rateType < 0 }"></div>{{ item.rate }}%</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="map-info-tools">
      <a href="javascript:;" class="btn" :class="{
        'btn-on': item.active
      }" v-for="(item, index) in btns" :key="index" @click.stop.prevent="handleMapAction(item, index)">
        <div class="desc">
          <div class="text">
            {{ item.desc }}
            <div class="arrow"></div>
          </div>
        </div>
        <img :src="item.icon" class="icon">
      </a>
    </div>
    <div ref="map_container" class="map-container"></div>
  </div>
</template>
<script>
import { getMapToken, getToken } from '@/utils/token';
import CommonMixin from '../mixin/CommonMixin';
// 工具图片
import icon_hangar from '@/assets/images/yyzhkb/kb-map-btn-hangar.svg'
import icon_flight from '@/assets/images/yyzhkb/kb-map-btn-flight.svg'
export default {
  mixins: [CommonMixin],
  data() {
    return {
      code: 'MAP',
      loading: false,
      map: null,
      list: [
        { title: '年度累计交易额', key: 'total_sales', value: 0, unit: '元', rate: 0 },
        { title: '下单次数', key: 'order_count', value: 0, unit: '次', rate: 0 },
        { title: '转化率', key: 'conversion_rate', value: 0, unit: '%', rate: 0 },
      ],
      btns: [
        { icon: icon_hangar, offData: { showUavType: 'flyOff' }, onData: { showUavType: 'flyOn' }, active: false, desc: '飞行中' }, // 黄色的
        { icon: icon_flight, offData: { showUavType: 'uavOff' }, onData: { showUavType: 'uavOn' }, active: true, desc: '待命中' } // 绿色的
      ]
    }
  },
  mounted() {
    this.renderMap()
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await this.queryData(this.code)
      this.loading = false
      const dataResult = res.data.dataResult
      console.log('地图数据：', dataResult)
      const year = 2024
      const lastYear = year - 1
      const now = dataResult.find(item => item.annual == year)
      const last = dataResult.find(item => item.annual == lastYear)
      this.list = this.list.map(item => {
        item.value = now[item.key]
        if (last) {
          // 存在上一年的数据
          item.rate = Math.abs(((item.value - last[item.key]) / last[item.key] * 100).toFixed(2))
          if(item.value - last[item.key] < 0) {
            item.rateType = -1
          } else {
            item.rateType = 1
          }
        }
        return item;
      })

    },
    renderMap() {
      this.loading = true
      this.$nextTick(() => {
        const container = this.$refs.map_container
        const map = document.createElement('iframe')
        this.map = map
        map.src = `https://airace.com.cn/hyymap/#/pagescene?tk=${getToken()}&sid=266946423468851203`
        map.style.border = 0
        map.style.width = '100%'
        map.style.height = '100%'
        container.appendChild(map)
        map.onload = () => {
          this.loading = false
          // setTimeout(() => {
          //   this.map.contentWindow.postMessage({ showUavType: 'uavOn' }, '*')
          // }, 2000)
        }
      })
    },
    select() {
      return
      console.log('触发')
      // 传个值看看
      this.map.contentWindow.postMessage({
        cityName: '广东省',
        cityObj: {
          id: '6121444e-1f15-11ef-b8e2-fefcfe621df2',
          type: '3',
          name: '广东省',
          dm: '440000000000',
          pdm: null,
          regiondm: null,
          geoData: null,
          centerX: 0,
          centerY: 0,
          minlng: 0,
          minlat: 0,
          maxlng: 0,
          maxlat: 0,
          pinYin: 'GDS',
          pinYinFull: 'GUANGDONGSHENG',
        },
        cityNode: {}
      }, '*')
    },
    // 地图交互
    handleMapAction(item, index) {
      console.log('地图传值：', (item.active ? item.offData : item.onData))
      this.map.contentWindow.postMessage((item.active ? item.offData : item.onData), '*')
      // this.$set(this.btns[index], 'active', !item.active)

      // 一个出现另一个消失
      this.btns = this.btns.map(btn => {
        if(item.desc == btn.desc) {
          btn.active = !item.active
        } else {
          btn.active = false
        }
        return btn
      })


    }
  }
}
</script>
<style lang="scss" scoped>

.triangle-up {
  position: relative;
  width: 0;
  height: 0;
  border-left: tvw(5) solid transparent;
  border-right: tvw(5) solid transparent;
  border-bottom: tvw(5) solid #20F3FB;
  // box-shadow: 0 0 tvw(5) #20F3FB;
}
.triangle-down {
  position: relative;
  width: 0;
  height: 0;
  border-left: tvw(5) solid transparent;
  border-right: tvw(5) solid transparent;
  border-top: tvw(5) solid #EF7300;
  // box-shadow: 0 0 tvw(5) #EF7300;
}
.map-info {
  position: relative;
  width: 100%;
  height: tvh(662);

  .map-info-header {
    width: 100%;
    position: absolute;
    top: tvw(16);
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;

    .cards {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 tvw(12);
        min-width: tvw(205);
        min-height: tvw(68);
        box-sizing: border-box;
        // margin-right: tvw(24);
        background: linear-gradient(180deg, rgba(10, 48, 130, 0) 0%, rgba(10, 60, 130, 1) 100%);
        border: 1px solid #285CA8;

        .light {
          position: absolute;
          display: block;
          width: tvw(6);
          height: tvw(6);
          background: url(~@/assets/images/yyzhkb/kb-center-card-light.svg) center center no-repeat;
          background-size: contain;
        }

        .light1 {
          top: tvw(-4);
          left: tvw(-4);
        }

        .light2 {
          top: tvw(-4);
          right: tvw(-4);
        }

        .light3 {
          bottom: tvw(-4);
          right: tvw(-4);
        }

        .light4 {
          bottom: tvw(-4);
          left: tvw(-4);
        }

        .main {
          margin-right: tvw(24);

          .desc {
            font-size: tvw(14);
            color: #ffffff;
          }

          .number {
            font-size: tvw(24);
            color: #ffffff;
            font-weight: bold;
          }

          .unit {
            font-size: tvw(14);
            color: #ffffff;
          }
        }

        .rate {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          font-size: tvw(14);

          .value {
          display: flex;
          align-items: center;
          justify-content: center;
            color: #EF7300;
          }
          .up-value {
            color: #20F3FB;
          }
        }
      }

      .item:last-child {
        margin-right: 0;
      }
    }

    .city-select {
      display: block;
      background: url(~@/assets/images/yyzhkb/city-select-bg.svg) center center no-repeat;
      background-size: cover;
      width: tvw(120);
      height: tvw(36);
      display: flex;
      align-items: center;
      justify-content: center;

      .city-select-item {
        font-size: tvw(14);
        color: #ffffff;
        text-decoration: none;
      }
    }
  }


  .map-container {
    display: block;
    width: 100%;
    height: 100%;
  }

  .map-info-tools {
    position: absolute;
    bottom: tvw(20);
    right: tvw(20);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .btn {
      position: relative;
      background: url(~@/assets/images/yyzhkb/kb-map-btn-bg-off.svg) center center no-repeat;
      background-size: 100% 100%;
      width: tvw(48);
      height: tvw(48);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .25s;

      .icon {
        display: block;
        width: tvw(36);
        height: tvw(36);
      }

      .desc {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(-100%) translateY(50%);
        background: rgba(2, 50, 78, 1);
        border: 1px solid rgba(0, 185, 254, 0.5);
        border-radius: 2px;
        .text {
          position: relative;
          font-size: tvw(13);
          white-space: nowrap;
          color: #ffffff;
          padding: tvw(3) tvw(14);
          .arrow {
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(100%, 100%);
            width: tvw(4);
            height: tvw(7);
            background: url(~@/assets/images/yyzhkb/kb-map-bubble-arrow.svg) center center no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }

    .btn-on {
      background-image: url(~@/assets/images/yyzhkb/kb-map-btn-bg-on.svg);
    }

    .btn:hover {
      .desc{
        display: block;
      }
      background-image: url(~@/assets/images/yyzhkb/kb-map-btn-bg-on.svg);
    }
  }
}
</style>